<template>
    <a-drawer :title="title" width="80%" destroyOnClose :visible="visible" @close="() => {
        this.visible = false
    }
        ">
        <a-card :bordered="false">
            <a-table ref="table" :scroll="{ y: tableHeight }" :columns="columns" :rowKey="(row, index) => index"
                :dataSource="data" :loading="loading" :bordered="true" size="small" style="margin-top: -30px;">
                <span slot="UserAvatarURL" slot-scope="text, record">
                    <a v-if="hasPerm('Base_User.Edit')">
                        <a-popover>
                            <!-- <img :src="text" @error="this.src = null" width="30px" height="30px" /> -->
                            <a-avatar icon="user" :src="text" style="width: 40px;height: 40px;" />
                            <template #content>
                                <a-avatar icon="user" :src="text" :size="200" style="width: 200px;height: 200px;" />
                            </template>
                        </a-popover>
                    </a>
                </span>
            </a-table>
        </a-card>
    </a-drawer>
</template>
  
<script>
const columns = [
    { title: '头像', dataIndex: 'Icon', width: '4%', scopedSlots: { customRender: 'UserAvatarURL' } },
    { title: '姓名', dataIndex: 'Name', width: '10%' },
    { title: '昵称', dataIndex: 'NickName', width: '10%' },
    { title: '性别', dataIndex: 'Sex', width: '10%' },
    { title: '手机号码', dataIndex: 'Phone', width: '10%' },
    { title: '邮箱', dataIndex: 'Email', width: '10%' },
    { title: '地址', dataIndex: 'Address', width: '10%' },
]

export default {
    components: {
    },
    props: {
        pId: { require: true },
    },
    mounted() {
        this.$nextTick(() => {
            // 页面渲染完成后的回调
            this.tableHeight = this.getTableHeight(true) + 24
        })
        this.data = []
        console.log(this.pId)

    },
    watch: {
        pId(n, o) {
            console.log(n, o)
            if (n) {
                this.getDataList();
            }

        }
    },
    data() {
        return {
            tableHeight: 500, // 表格高度
            data: [],
            pagination: {
                current: 1,
                pageSize: 8,
                showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
                pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面啊可以通过下拉框进行选择
                showSizeChanger: true
            },
            entity: {},
            loading: false,
            columns,
            title: '',
            queryParam: { Condition: 'Name' },
            visible: false,
            imgUrl: require('@/assets/logo.png')
        }
    },

    methods: {
        getDataList(id, title) {
            this.visible = true
            this.title = title
            this.data = []
            this.$http
                .post('/Base_Mail/Base_MailList/GetDataListByMoreCondition', {
                    Search: [{
                        Condition: "UserId",
                        Keyword: id,
                    }]
                })
                .then((res) => {
                    if (res.Success) {
                        this.data = res.Data;

                    }
                });
        },
    }
}
</script>
  